<template>
    <div class="activity-list">
        <el-row>
            <el-col :span="6">
                <div class="left-box">
                    <el-tabs v-model="box_index_key" @tab-click="handleClick">
                        <el-tab-pane v-for="(item, index) in box_list_arr" :key="index" :label="item.label"
                            :name="item.name">
                            <div class="select-box flex_between">
                                <el-select size="mini" class="select-w" v-model="shopid_yd" placeholder="请选择"
                                    @change="selectFun">
                                    <el-option v-for="item in getYunShopList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                            <div :style="{ height: stateHooks.leftHeight + 'px', overflow: 'hidden' }">
                                <LeftList :height="stateHooks.leftHeight" :templates="templatesEventLs"
                                    :listData="listData" :selectedIndex.sync="selectedIndex" @loadFun="loadFun"
                                    ref="leftListRef" :lLoading="lLoading" :lNoMore="lNoMore"
                                    @clickItem="clickEventLsItem">
                                    <div slot-scope="{row}" slot="qcode" class="flex_row">
                                        <div class="q-code-box" v-if="row.qcode">
                                            <el-image class="q-code-box-img" fit='contain' :src="row.qcode" alt="" :preview-src-list="[row.qcode]"/>
                                        </div>
                                        <div class="flex1 ml10">
                                            <div class="flex_between">
                                                <div>{{ row.sp_name || '-' }}</div>
                                                <div>{{ row.status_txt || '-' }}</div>
                                            </div>
                                            <div class="">{{ row.txt || '-' }}</div>
                                            <div class="">{{ row.isone_txt || '-' }}</div>
                                        </div>
                                    </div>
                                </LeftList>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                    <div class="iconBox">
                        <text class="icon-font search-icon" @click="addActivityList">&#xe606;</text>
                    </div>
                </div>
            </el-col>
            <el-col :span="18">
                <div class="rigth-box">
                    <addOrEdit :getYunShopList="getYunShopSeleteList" ref="addOrEditRef" @backFun="backFun"
                        @addTpBmFun="addTpBmFun" :detailID="detailID" :box_index_key="box_index_key">
                    </addOrEdit>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, computed } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
import { statusColor } from "@/utils/common.js"
import { useCommonHooks } from '@/hooks/useCommonHooks.js'
import LeftList from "@/pages/scanCodeToOrder/components/leftList.vue"
import addOrEdit from "@/pages/scanCodeToOrder/components/addOrEdit.vue"
const maxPnum = 20
// 获取当前组件实例
const { proxy } = getCurrentInstance()
// 使用全局状态
const { stateHooks } = useCommonHooks()
const lLoading = ref(false)
const lNoMore = ref(false)

const box_index_key = ref('1')
const selectedIndex = ref(0)
const recordSelectedIndex = ref(0)
const box_list_arr = ref([
    {
        label: "启用中",
        name: '1',
    }, {
        label: "已停用",
        name: '2',
    }
])
// 分销规则记录
const templatesEventLs = ref([
    {
        type: "slot",
        key: "qcode",
    },
])
const listData = ref([])
const detailID = ref('')
const getYunShopList = ref([{
    name: "全部云店",
    id: 0,
}])
const getYunShopSeleteList = ref([])

const shopid_yd = ref(0)
const pfrom = ref(0)
const leftListRef = ref(null)
const addOrEditRef = ref(null)

// 新增活动
const isEdit = ref(false)
const addActivityList = () => {
    isEdit.value = true
    selectedIndex.value = null
    detailID.value = ''
    if (addOrEditRef.value) {
        addOrEditRef.value.restFun()
        addOrEditRef.value.objectForm.act = 'add'
        addOrEditRef.value.objectForm.status = 1
        addOrEditRef.value.objectForm.type = ''
    }
}

// 状态切换
const handleClick = (e) => {
    selectedIndex.value = 0
    recordSelectedIndex.value = 0
    box_index_key.value = box_list_arr.value[e.index].name
    refreshFun()
    getEventLs(true)
}

const refreshFun = () => {
    lNoMore.value = false
    lLoading.value = false
    pfrom.value = 0
    detailID.value = ''
    listData.value = []
}

// 选择分店
const selectFun = (e) => {
    getEventLs(true)
}

const loadFun = () => {
    if (lNoMore.value) return
    pfrom.value += 20
    getEventLs(false)
}

const getEventLs = async (t = true) => {
    lLoading.value = true
    // type  是否刷新列表
    if (t == true) {
        pfrom.value = 0
        listData.value = []
    }
    let param = {
        shopid_yd: shopid_yd.value,
        pnum: maxPnum,
        pfrom: pfrom.value,
        status: box_index_key.value,
    }
    try {
        let res = await proxy.$api({ url: config.yx_scan_order_ls, data: param })
        lLoading.value = false
        if (res.status == 1) {
            let result = res.data
            if (result.ls) {
                listData.value.push(...result.ls)
                // 确保索引在有效范围内
                const validIndex = Math.min(selectedIndex.value, listData.value.length - 1)
                detailID.value = listData.value[validIndex]?.id
                if (res.status == 1 && result.ls.length < maxPnum) {
                    lNoMore.value = true
                } else {
                    lNoMore.value = false
                }
            } else {
                lNoMore.value = true;
            }
        } else {
            lNoMore.value = true
        }
    } catch (error) {
        lLoading.value = false
        lNoMore.value = true
    } finally {
        lLoading.value = false
    }
}

//  获取云店列表
const getYunShopLsFun = async () => {
    let param = {}
    try {
        let res = await proxy.$api({ url: config.YUN_SHOP_LS, data: param })
        if (res.status == 1) {
            getYunShopList.value.push(...res.data)
            getYunShopSeleteList.value = res.data
        }
    } catch (error) {
    }
}

const addTpBmFun = (e) => {
    box_index_key.value = e?.status?.toString()
    isEdit.value = true
    if (e.type == 'add' || e.type == 'del' || e.type == 'edt') {
        selectedIndex.value = 0
        refreshFun()
        getEventLs(true)
    } else if (e.type == 'edt') {
        selectedIndex.value = recordSelectedIndex.value
        detailID.value = listData.value[recordSelectedIndex.value].id
        getEventLs(true)
    } else {
        selectedIndex.value = recordSelectedIndex.value
        detailID.value = listData.value[recordSelectedIndex.value].id
    }
}

const clickEventLsItem = (index) => {
    isEdit.value = true
    selectedIndex.value = index
    recordSelectedIndex.value = index
    detailID.value = listData.value[index].id
    addOrEditRef.value.objectForm.act = 'edt'
}

const backFun = (e) => {
    if (e == 'back') {
        selectedIndex.value = recordSelectedIndex.value
        detailID.value = listData.value[recordSelectedIndex.value].id
    }
}

// 正确使用 watch
watch(() => selectedIndex.value, (newValue) => {
    console.log("newValue=", newValue)
}, {
    immediate: true
})

onMounted(() => {
    getEventLs(true)
    getYunShopLsFun()
})

</script>

<style lang="scss" scoped>
div {
    box-sizing: border-box;
}
.activity-list {
    .left-box,
    .rigth-box {
        width: 100%;
        padding: 10px 10px 0 10px;
        height: 100vh;
        position: relative;
        border-right: 1px solid #e6e6e6;
        .iconBox {
            position: absolute;
            top: 0px;
            right: 13px;
            font-size: 26px;
            cursor: pointer;

            .search-icon {
                font-size: 20px;
                color: #333;
            }
        }
        .marketing-add {
            width: 100%;
        }
    }
}
.left-box {
    .select-w {
        width: 49%;
    }
}
.q-code-box{
    height: 70px;
    width: 70px;
    border-radius: 4px;
    overflow: hidden;
    .q-code-box-img{
        height: 100%;
        width: 100%;
    }
}
</style>